<!--修改个人资料-->
<template>
  <div style="width: 100%;height: 600px;margin-left: 60px;overflow: auto;
       box-sizing: border-box;font-size: 17px;text-align: left">

    <!--  <h1>个人资料</h1>-->
    <!--    返回标开始-->
    <el-link :underline="false" type="primary">
      <p style="font-size: 18px" @click="locationUrl('personinfo')" class="el-icon-arrow-left">个人资料</p>
    </el-link>
    <el-divider/>
    <!--    返回标结束-->

    <!--    个人信息开始-->
    <div class="personInfo_alter">
      <!-- 头像-->
      <div>
        <span>头像</span>
        <img width="100px" style="margin-left: 90px" height="100px"  :src="'http://localhost:29000'+this.user.imgUrl" alt="">
        <div style="margin-left: 10px;position: relative;top: 20px">
          <el-upload
              class="upload-demo"
              action='http://localhost:29000/v1/upload'
              :on-preview="handlePreview"
              :on-success="handleAvatarSuccess"
              :on-remove="beforeRemove"
              multiple
              name="file"
              :limit="1">
            <div slot="tip" class="el-upload__tip">可选择默认头像，也支持支持jpg、jpeg、png图片文件图片大小需小于1MB</div>
            <el-button size="small" type="primary">点击上传</el-button>
          </el-upload>
        </div>
      </div>

      <!-- 姓名-->
      <div>
        <span>基本信息</span>
        <p>{{ user.username }}</p>
        <el-link :underline="false" type="primary">
          <p @click="openDialog" style="font-weight: bold" class="el-icon-edit">修改</p>
        </el-link>

        <!--    对话框    -->
        <el-dialog
            title="请编辑个人信息"
            :visible.sync="dialogVisible"
            width="500px"
            :before-close="handleClose">
          <span>
            <el-input style="margin-bottom: 20px" v-model="user.age"  max="2" placeholder="请输入您的年龄"/>
            <el-input style="margin-bottom: 20px" v-model="user.gender"  max="1" placeholder="请输入您的性别"/>
            <el-input style="margin-bottom: 20px" v-model="user.nation"  max="1" placeholder="请输入您的民族"/>
            <el-input style="margin-bottom: 20px" v-model="user.nativE"  max="1" placeholder="请输入您的籍贯"/>
            <el-input style="margin-bottom: 20px" v-model="user.seniority"  max="2" placeholder="请输入您的工龄"/><span>请输入对应信息，修改待审核后显示</span>
          </span>
<!--          username:'',password:'',age:'',gender:'',native:'',nation:'',seniority:''-->
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary" @click="alterUserInfo">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <!-- 手机号-->
      <div>
        <span>手机号</span>
        <p>{{ user.phone }}</p>
        <el-link :underline="false" type="primary">
          <p @click="dialogVisible_phone = true" style="font-weight: bold" class="el-icon-phone">更换手机号</p>
        </el-link>

        <!--    对话框    -->
        <el-dialog
            title="请修改手机号"
            :visible.sync="dialogVisible_phone"
            width="500px"
            :before-close="handleClose">
          <span class="dialog_text">
           <div style="display: flex;">
              <span style="width: 80px;line-height: 60px">手机号：</span><el-input style="width: 100%"  v-model="user.phone" max="6" placeholder="请输入内容"/><br>
           </div>
          </span>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible_phone = false">取 消</el-button>
            <el-button type="primary" @click="dialogVisible_phone=false">确 定</el-button>
          </span>
        </el-dialog>
      </div>

      <!-- 实名认证-->
      <div >
        <span>实名认证</span>
        <p style="font-size: 15px;color: rgba(0,0,0,0.5)">您还未进行实名认证，
          <el-link :underline="false" @click="locationAuthentica" type="primary">点击可完成实名认证>></el-link>
        </p>
      </div>

      <!--  -->

      <!-- 按钮提交 -->
      <div>
        <el-button style="margin-left: 100px" @click="phoneCaseEnter">提交</el-button>
      </div>



    </div>
    <!--    个人信息结束-->


  </div>
</template>

<script>
export default {
  name: "MemberPersonInfoAlterView",
  data() {
    return {
      dialogVisible: false,
      dialogVisible_phone:false,
      user:{username:'',age:'',gender:'',nativE:'',nation:'',seniority:'',phone:''},
      imgUrl:'',
    }
  },
  methods: {
    openDialog(){
      this.dialogVisible=true;
      if (this.user.gender==1){
        this.user.gender='男'
      }
    },
    alterUserInfo(){
      if (this.user.gender=='男' || this.user.gender=='女'){

      }else{
        this.$message.error("输入错误！")
        return;
      }
      this.dialogVisible=false;
    },
    phoneCaseEnter(){
      if (this.user.username==""){
        this.user.username=null;
      }if (this.user.password==""){
        this.user.password=null;
      }
      if (this.user.imgUrl==""){
        this.user.imgUrl=null;
      }
      if (this.user.age==""){
        this.user.age=null;
      }
      if (this.user.gender==""){
        this.user.gender=null;
      }
      if (this.user.gender=='男'){
        this.user.gender=0;
      }else {
        this.user.gender=1;
      }
      if (this.user.nativE==""){
        this.user.nativE=null;
      }
      if (this.user.nation==""){
        this.user.nation=null;
      }
      if (this.user.seniority==""){
        this.user.seniority=null;
      }
      let jwt=JSON.parse(localStorage.getItem('user')).token;
      this.axios
          .create({
            'headers': {
              'Authorization': jwt
            }
          })
          .post('http://localhost:29000/v1/users/alter',this.user)
      .then((response)=>{
        if (response.data.code==20000){
          localStorage.user=JSON.stringify(this.user);
          this.$message.success("修改成功！");
          location.href='/member'
          if (this.user.gender==0){
            this.user.gender='男';
          }else if(this.user.gender==1){
            this.user.gender='女';
          }
        }else{
          location.href='/member';
          this.user.phone=this.phone;
          this.$message.error(response.data.message);
        }
      })
      this.dialogVisible_phone=false;

    },
    locationAuthentica(){
      this.$router.push("/member/authentica")
    },
    handleClose(done) {
      this.$confirm('确认关闭？')
          .then(_ => {
            done();
          })
          .catch(_ => {
          });
    },

    beforeRemove(file,fileList){


      this.user.imgUrl=this.imgUrl;//删除图片后让user的图片路径恢复之前的路径
      // 向服务器发请求删除服务器的图片 file.response=JsonResult
      // file.response.data 删除文件对应的图片路径
      this.axios.post('http://localhost:29000/v1/remove?url='+file.response.data)
          .then((response)=>{
            if (response.data.code==20000){
              this.$message.success("删除完成！");
            }
          })
    },
    handleAvatarSuccess(res, file) {
      this.user.imgUrl=res.data;

    },
    handlePreview(file) {
      this.user.imgUrl = file.url;
      this.dialogVisible = true;
    },
  },
  mounted() {
    this.user=JSON.parse(localStorage.getItem('user'));
    if (this.user==null){
      this.$message.error("请登录后重试！")
      this.$router.push('/login');
    }
    if (this.user.gender==0){
      this.user.gender='男';
    }else if(this.user.gender==1){
      this.user.gender='女';
    }
    this.imgUrl=this.user.imgUrl;


  }
}
</script>

<style scoped>
/deep/.personInfo_alter > div > .el-avatar[data-v-75c623a2]{
  background-color: white;
  border: 1px solid rgba(0,0,0,0.1);
}
/deep/.el-avatar>img{
  width: 120px;
  height: 120px;
}
.dialog_text div{
margin: 10px 0px;
}
.dialog_text div>span{
  line-height: 10px;
}


.personInfo_alter p {
  line-height: 100px;
  font-size: 16px;
  margin-left: 40px;
}

.personInfo_alter {
  margin: 0px 0px!important;
  padding:0px !important;
  overflow: auto;
}

.personInfo_alter > div {
  display: flex;
}

.personInfo_alter > div > span {
  line-height: 100px;
  font-size: 17px;
}

.personInfo_alter > div > .el-avatar {
  margin: 0px 40px;
}

.personInfo_alter > div > div {
  padding-top: 0px;
  box-sizing: border-box;
}
</style>